用javascript绘制雪花(Koch曲线) | 您所在的位置:网站首页 › js 绘制曲线 › 用javascript绘制雪花(Koch曲线) |
![]() ![]()
图1-3 规定最简单的曲线中的一条的所用五个点的表示 再高维度的Koch曲线最终都可以分解为如图1-3所示的这样一条线,其中的4条线段都相当,中间的三角形为全等三角形。 在绘制时,我们只要知道x1和x2的值,就可以相应的计算出x3、x4和x5的值。 先计算水平位置的各个点的公式,然后再扩展到各个角度,得到统一的公式,过程就不写了,也参考了一些资料(Koch曲线的构造及性质)。最终的公式如下: [javascript] var x3 = (x2 - x1) / 3 + x1; var y3 = (y2 - y1) /3 + y1; var x4 = (x2 - x1) / 3 * 2 + x1; var y4 = (y2 - y1) / 3 * 2 + y1; var x5 = x3 + ((x2 - x1) - (y2 - y1) * Math.sqrt(3)) / 6; var y5 = y3 + ((x2 - x1) * Math.sqrt(3) + (y2 - y1)) / 6; [/javascript] 现在就可以整理代码了,实现的基本思路当然是递归。 首先在页面中加入canvas标签。
canvas可以通过css样式设置,这里只加上了边框和背景色。 主体方法就是递归函数: [javascript] function koch(ctx, x1, y1, x2, y2, n, m){ //ctx为绘图对象,x1,y1,x2,y2为两头的点,n为当前维度,m为维度 if(m == 0){ ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); return false; } var x3 = (x2 - x1) / 3 + x1; var y3 = (y2 - y1) /3 + y1; var x4 = (x2 - x1) / 3 * 2 + x1; var y4 = (y2 - y1) / 3 * 2 + y1; var x5 = x3 + ((x2 - x1) - (y2 - y1) * Math.sqrt(3)) / 6; var y5 = y3 + ((x2 - x1) * Math.sqrt(3) + (y2 - y1)) / 6; n = n + 1; if(n == m){ ctx.moveTo(x1, y1); ctx.lineTo(x3, y3); ctx.lineTo(x5, y5); ctx.lineTo(x4, y4); ctx.lineTo(x2, y2); ctx.stroke(); return false; } koch(ctx, x1, y1, x3, y3, n, m) koch(ctx, x3, y3, x5, y5, n, m) koch(ctx, x5, y5, x4, y4, n, m) koch(ctx, x4, y4, x2, y2, n, m) } [/javascript] 只要说明参数的意思,代码应该是不需要注释了,很简单。下面加入draw方法,用来执行绘制: [javascript] function draw(){ var canvas = document.getElementById("cantest"); if(canvas.getContext){ canvas.height = canvas.height; var ctx = canvas.getContext("2d"); ctx.strokeStyle = "#fff"; ctx.beginPath(); var x1 = 400.00; var y1 = 150.00; var x2 = 100.00; var y2 = 150.00; var x11 = x2 + (x1 - x2) / 2; var y11 = y1 + Math.sin(Math.PI / 3) * (x1 - x2); var depth = parseInt(document.getElementById("txtDepth").value); //取得一个文本框的值,可以调整维度,这里没有进行输入判断。 koch(ctx, x1, y1, x2, y2, 0, depth); koch(ctx, x11, y11, x1, y1, 0, depth); koch(ctx, x2, y2, x11, y11, 0, depth); }else{ alert("不支持Canvas"); } [/javascript] 运行效果如图1-4:![]() |
今日新闻 |
推荐新闻 |
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 |